<template>
    <div id="bgBox" style="padding-top: 90px;">
        <div style="background: #fff;width: 63%;margin: 0 auto 55px;border-radius: 13px;">
            <img src="../../assets/images/7.jpg" style="max-width: 94%;border-radius: 6px;margin: 17px 3% 11px;" />
        </div>
        
        <van-cell-group style="background: initial;width: 80%;margin: 0px auto;">
            <van-field v-model="form.u_email" class="whitecolor" type="number" label="手机号：" placeholder="请输入" :error-message="rules.u_email" style="background: transparent;color: #fff;" />
            <van-field v-model="form.u_password" class="whitecolor" type="password" label="密码：" placeholder="请输入密码" :error-message="rules.u_password" style="background: transparent;color: #fff;" />
        </van-cell-group>
        <div class="text-center margin_t30">
            <van-button type="primary" class="width_80p btn_size_40 transparent" @click="onSubmit">登 录</van-button>
        </div>
        <div class="text-right margin_t15" style="width: 80%;margin: 25px auto 0;">
            <!-- <router-link to="/forgetpassword" class="maincolor font_13">忘记密码？</router-link> -->
            <router-link to="/register" class="font_13 whitecolor">暂无账号？去注册</router-link>
        </div>
    </div>
</template>
<style>
    html,body{
        height: 100vh;
    }
    #bgBox{
        height: calc(100vh - 90px);
        background: url('../../assets/images/6.jpg') no-repeat;
    }
</style>
<script>

    import { isvalidPhone, isvalidTel, checkEmail, checkIdcard } from '@/assets/js/validate.js'

    import '@/assets/css/main.css'
    export default {
        data(){
            return{
                form: {
                    'u_email': '',
                    'u_password': '',
                },
                rules: {
                    'u_email': '',
                    'u_password': '',
                },
            }
        },
        methods: {
            //校验字段
            verification(){
                //校验
                let state = true;

                if(!isvalidPhone(this.form.u_email)){
                    this.rules.u_email = '请输入正确的手机号';
                    return false;
                }else{
                    this.rules.u_email = '';
                    state = false;
                }
                
                if(this.form.u_password == ''){
                    this.rules.u_password = '请输入密码';
                    return false;
                }else{
                    this.rules.u_password = '';
                    state = false;
                }

                if(!state){
                    return true;
                }
            },
            //提交
            onSubmit(){

                var _this = this;
                
                if(_this.verification()){
                    //提交
                    this.$httpPost('/api/index/login/login',_this.form).then(response => {
                    
                        if(response.code == 200){

                            _this.$toast('登录成功');

                            window.localStorage.u_id = response.msg.u_id;  //用户id

                            setTimeout(() => {
                                _this.$router.push({
                                    path: '/index',
                                });
                            }, 2000);
                            

                        }else{
                            
                            this.$toast(response.msg);
                        }

                    });
                    
                }
                
            },
        },
        mounted(){
            
        },
    }
</script>